<template>
    <div>
        <myheader/>
        <h1>用户中心</h1>
        头像展示<van-image
        width="100"
        height="100" 
        :src="url"
        /> <br/>   
        头像上传<van-uploader :after-read="afterRead" />
        <p>用户名{{userinfo.username}}</p>
        <p>手机号{{userinfo.mobile | mobilefilter}}</p>

        
    </div>
    
</template>

<script>
import myheader from '../myheader.vue'
export default {
    data(){
        return{
            userinfo:{mobile:'18595604641'},
            userid : localStorage.getItem('userid'),
            url:'',
        }
    },
    //定义过滤器
    filters:{
        mobilefilter(value){
            return value.slice(0,3)+'******'+value.slice(-3,-1)
        }
    },
    methods: {
        // 点击头像上传单文件
        afterRead:function(file){
            // 此时可以自行将文件上传至服务器
            let data = new FormData()
            data.append('file',file.file)
            data.append('userid',this.userid)

            this.axios.post('users/uploda/',data)
            .then(res=>{
                //更新展示图片
                // alert(this.upload_dir)
                this.url =  this.upload_dir +this.userid +'/'+ res.data.filename
            })
        },
        getUserinfo:function(){
            this.axios.get('users/getuserinfo/?userid='+this.userid)
            .then(res=>{  
                if(res.data.code==200){
                    this.userinfo = res.data.dict1
                    this.url =  this.upload_dir +this.userid +'/'+ res.data.dict1.avater

                }else{
                    this.$toast.fail(res.data.mes)
                }
            })
        }
    },
    mounted() {
        this.getUserinfo()
    },   


    components:{
        'myheader':myheader
    }
    
}
</script>


<style scoped>

</style>